<template>
  <a-tabs defaultActiveKey="3">
    <a-tab-pane tab="节点" key="1">
      <a-row align="middle">
        <a-col :span="8">边框颜色</a-col>
        <a-col :span="14">
          <a-input
            type="color"
            :value="globalGridAttr.nodeStroke"
            style="width: 100%"
            @change="onStrokeChange"
          />
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="8">边框粗细</a-col>
        <a-col :span="12">
          <a-slider
            :min="1"
            :max="5"
            :step="1"
            :value="globalGridAttr.nodeStrokeWidth"
            @change="onStrokeWidthChange"
          />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ globalGridAttr.nodeStrokeWidth }}</div>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="8">填充颜色</a-col>
        <a-col :span="14">
          <a-input
            type="color"
            :value="globalGridAttr.nodeFill"
            style="width: 100%"
            @change="onFillChange"
          />
        </a-col>
      </a-row>
    </a-tab-pane>
    <a-tab-pane tab="文本" key="2">
      <a-row align="middle">
        <a-col :span="8">字体大小</a-col>
        <a-col :span="12">
          <a-slider
            :min="8"
            :max="16"
            :step="1"
            :value="globalGridAttr.nodeFontSize"
            @change="onFontSizeChange"
          />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ globalGridAttr.nodeFontSize }}</div>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="8">字体颜色</a-col>
        <a-col :span="14">
          <a-input
            type="color"
            :value="globalGridAttr.nodeColor"
            style="width: 100%"
            @change="onColorChange"
          />
        </a-col>
      </a-row>
    </a-tab-pane>
    <a-tab-pane tab="属性" key="3">
      <a-row align="middle">
        <a-col :span="8">节点名称</a-col>
        <a-col :span="14">
          <a-input
            :value="globalGridAttr.text"
            style="width: 100%"
            @change="onNameChange"
          />
        </a-col>
      </a-row>
      <!-- <a-row align="middle">
        <a-col :span="8">节点属性</a-col>
        <a-col :span="14">
          <a-input
            :value="globalGridAttr.nodeUsers"
            style="width: 100%"
            @change="onUsersChange"
          />
        </a-col>
      </a-row> -->
      <a-row align="middle">
        <a-col :span="8">节点类型</a-col>
        <a-col :span="14">
          <a-input :value="types" style="width: 100%" />
        </a-col>
      </a-row>
      <Task @change='handleChange' v-if="types==='process'"/>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import { defineComponent, inject, watch } from 'vue'
import { Cell } from '@antv/x6'
import { nodeOpt } from '@/views/flow/components/ConfigPanel/ConfigNode/method'
import Task from './task/Index.vue'
export default defineComponent({
  name: 'index',
  components: {
    Task
  },
  props: {
    types: {
      type: String,
      default: 'start'
    }
  },
  setup () {
    const globalGridAttr: any = inject('globalGridAttr')
    const id: any = inject('id')
    let curCel: Cell
    watch(
      [() => id.value],
      () => {
        curCel = nodeOpt(id, globalGridAttr)
      },
      {
        immediate: false,
        deep: false
      }
    )
    // 设置节点边框颜色
    const onStrokeChange = (e: any) => {
      const val = e.target.value
      globalGridAttr.nodeStroke = val
      curCel?.attr('body/stroke', val)
    }

    // 设置节点边框宽度
    const onStrokeWidthChange = (val: number) => {
      globalGridAttr.nodeStrokeWidth = val
      curCel?.attr('body/strokeWidth', val)
    }

    // 设置节点填充颜色
    const onFillChange = (e: any) => {
      const val = e.target.value
      globalGridAttr.nodeFill = val
      curCel?.attr('body/fill', val)
    }

    // 设置字体大小
    const onFontSizeChange = (val: number) => {
      globalGridAttr.nodeFontSize = val
      curCel?.attr('text/fontSize', val)
    }

    // 设置字体颜色
    const onColorChange = (e: any) => {
      const val = e.target.value
      globalGridAttr.nodeColor = val
      curCel?.attr('text/fill', val)
    }

    // 处理节点名称修改
    const onNameChange = (e: any) => {
      const val = e.target.value
      globalGridAttr.text = val
      curCel?.attr('text/text', val)
    }

    // 处理节点属性数据
    // const onUsersChange = (e: any) => {
    //   const val = e.target.value
    //   globalGridAttr.nodeUsers = val
    //   curCel?.attr('approve/users', val)
    // }
    const handleChange = (e: any) => {
      const { val, type } = e
      curCel?.attr(`approve/${type}`, val)
    }

    return {
      globalGridAttr,
      onStrokeChange,
      onStrokeWidthChange,
      onFillChange,
      onFontSizeChange,
      onColorChange,
      // onUsersChange,
      handleChange,
      onNameChange
    }
  }
})
</script>

<style lang="less" scoped>
</style>
